<template>
  <div class="discover-page">
    <!-- 背景组件 -->
    <DiscoverBackground />
    
    <!-- 安全区域 -->
    <div class="safe-area">
      <!-- 顶部导航 -->
      <DiscoverHeader />
    </div>
    
    <!-- 滚动容器 -->
    <div class="scroll-container">
      <!-- 标题区域 -->
      <TitleSection />
      
      <!-- 用户头像圈 -->
      <UserAvatars />
      
      <!-- 弹幕滚动 -->
      <BannerScroll 
        :danMuList1="danMuList1" 
        :danMuList2="danMuList2" 
      />
      
      <!-- 搜索区域 -->
      <SearchSection :postZone="postZone" />
      
      <!-- 小谷粒福利 -->
      <BenefitsSection :benefits="benefits" />
      
      <!-- 谷粒请你看电影 -->
      <MovieSection />
      
      <!-- 帖子列表 -->
      <PostList ref="postListRef" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, provide } from 'vue'
import DiscoverBackground from './components/DiscoverBackground.vue'
import DiscoverHeader from './components/DiscoverHeader.vue'
import TitleSection from './components/TitleSection.vue'
import UserAvatars from './components/UserAvatars.vue'
import BannerScroll from './components/BannerScroll.vue'
import SearchSection from './components/SearchSection.vue'
import BenefitsSection from './components/BenefitsSection.vue'
import MovieSection from './components/MovieSection.vue'
import PostList from './components/PostList.vue'
import { getDiscoverDataApi } from '@/api/discover'

// 发现页面数据
const danMuList1 = ref([])
const danMuList2 = ref([])
const postZone = ref({})
const benefits = ref([])

// 帖子列表引用
const postListRef = ref(null)

// 获取发现页面数据
const getDiscoverData = async () => {
  try {
    const discoverData = await getDiscoverDataApi()
    console.log('发现页面原始数据:', discoverData)
    
    // 处理 danMuList1 - 确保是数组
    if (Array.isArray(discoverData.danMuList1)) {
      danMuList1.value = discoverData.danMuList1
    } else {
      danMuList1.value = []
    }
    
    // 处理 danMuList2 - 确保是数组
    if (Array.isArray(discoverData.danMuList2)) {
      danMuList2.value = discoverData.danMuList2
    } else {
      danMuList2.value = []
    }
    
    // 处理 postZone - 确保是对象
    if (typeof discoverData.postZone === 'object' && !Array.isArray(discoverData.postZone) && discoverData.postZone.mainPost) {
      postZone.value = discoverData.postZone
    } else {
      // 如果postZone为空或没有mainPost，使用默认数据
      postZone.value = {
        mainPost: {
          followerNum: 4998,
          title: '""出闲置🔍""',
          userAvatar: '/src/assets/imgs/avatar_login.png',
          userName: '打嘎的',
          postContent: '数码一套房子，两室一厅，一个一口，两北卧室，落地窗，家电齐全，拎包入住，有意私我。'
        },
        contentBlockList: [
          { img: '/src/assets/imgs/room_text_bg.png' },
          { img: '/src/assets/imgs/discover.png' },
          { img: '/src/assets/imgs/service_bg.png' }
        ]
      }
    }
    
    // 处理 benefits - 确保是数组
    if (Array.isArray(discoverData.benefits)) {
      benefits.value = discoverData.benefits
    } else {
      benefits.value = []
    }
    
    console.log('发现页面数据加载成功:', {
      danMuList1: danMuList1.value,
      danMuList2: danMuList2.value,
      postZone: postZone.value,
      benefits: benefits.value
    })
    
    // 特别检查postZone数据
    console.log('postZone详细数据:', postZone.value)
    console.log('postZone.mainPost:', postZone.value.mainPost)
    console.log('postZone.contentBlockList:', postZone.value.contentBlockList)
  } catch (error) {
    console.error('获取发现页面数据失败:', error)
    
    // 使用默认数据
    // danMuList1.value = [
    //   { avatar: '/src/assets/imgs/avatar_unlogin.png', content: '千饭了' },
    //   { avatar: '/src/assets/imgs/avatar_login.png', content: '过生日' },
    //   { avatar: '/src/assets/imgs/my_people.png', content: '千饭了' },
    //   { avatar: '/src/assets/imgs/avatar_unlogin.png', content: '过生日' },
    //   { avatar: '/src/assets/imgs/avatar_login.png', content: '分享你也刻' }
    // ]
    
    // danMuList2.value = [
    //   { avatar: '/src/assets/imgs/my_people.png', content: '过生日' },
    //   { avatar: '/src/assets/imgs/avatar_unlogin.png', content: '过生日' },
    //   { avatar: '/src/assets/imgs/avatar_login.png', content: '分享你也刻' },
    //   { avatar: '/src/assets/imgs/my_people.png', content: '过生日' },
    //   { avatar: '/src/assets/imgs/avatar_unlogin.png', content: '千饭了' }
    // ]
    
    // postZone.value = {
    //   mainPost: {
    //     followerNum: 4998,
    //     title: '""出闲置🔍""',
    //     userAvatar: '/src/assets/imgs/avatar_login.png',
    //     userName: '打嘎的',
    //     postContent: '数码一套房子，两室一厅，一个一口，两北卧室，落地窗，家电齐全，拎包入住，有意私我。'
    //   },
    //   contentBlockList: [
    //     { img: '/src/assets/imgs/room_text_bg.png' },
    //     { img: '/src/assets/imgs/discover.png' },
    //     { img: '/src/assets/imgs/service_bg.png' }
    //   ]
    // }
    
    // benefits.value = [
    //   { img: '/src/assets/imgs/discover_photo.png' },
    //   { img: '/src/assets/imgs/vip_bg.png' },
    //   { img: '/src/assets/imgs/room_text_bg.png' }
    // ]
    
    // console.log('使用默认发现页面数据')
  }
}

// 刷新帖子列表的方法
const refreshPostList = () => {
  if (postListRef.value && postListRef.value.refreshPosts) {
    postListRef.value.refreshPosts()
  }
}

// 提供给子组件的方法
provide('refreshPostList', refreshPostList)

onMounted(() => {
  getDiscoverData()
})
</script>

<style scoped>
.discover-page {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.safe-area {
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}

.scroll-container {
  flex: 1;
  overflow-y: auto;
  position: relative;
  z-index: 10;
  padding-bottom: 20px;
  /* 为底部TabBar预留空间 */
  margin-bottom: 60px;
}

/* 滚动条样式优化 */
.scroll-container::-webkit-scrollbar {
  width: 4px;
}

.scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .scroll-container {
    margin-bottom: 50px;
  }
}
</style>
